<template>
  <div class="container">
    <salaryTopTitle
      @gobackTriser="goBack"
      :salaryOperate="salaryOperate"
      :salaryExcel="salaryExcel"
    ></salaryTopTitle>

    <!--制作工资表-->
    <div class="mainCon">
      <createSalaryStep :activeIndex="activeIndex"></createSalaryStep>
      <div class="createPayWin">
        <p>创建工资表</p>

        <el-row class="toolbar" style="padding-bottom: 0">
          <el-form
            :model="formData"
            label-width="85px"
            ref="formData"
            :rules="formRules"
          >
            <el-row class="row-padding-bottom">
              <el-col>
                <el-form-item label="创建方式">
                  <el-input
                    v-model="createWay"
                    disabled="disabled"
                    class="createWay"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-padding-bottom">
              <el-col>
                <el-form-item label="企业名称">
                  <el-input
                    v-model="nickName"
                    disabled="disabled"
                    class="companyName"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-padding-bottom">
              <el-col>
                <el-form-item label="员工范围" prop="orgId">
                  <el-cascader
                    v-model="formData.orgId"
                    :options="orglist"
                    :props="{ checkStrictly: true }"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-padding-bottom">
              <el-col>
                <el-form-item label="发薪月份" prop="month">
                  <el-date-picker
                    v-model="formData.month"
                    type="month"
                    value-format="yyyy-MM"
                    :picker-options="pickerOptions"
                    placeholder="选择月"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="row-padding-bottom">
              <el-button
                class="commonBut saveBtn"
                @click="toCreateSalary"
                :loading="isAdd"
                >确定生成</el-button
              >
              <el-button class="commonBut" @click="goBack"
                >返回上一页</el-button
              >
              <!-- <div class="goBack" @click="goBack">
               <i class="icon iconfont iconfanhui"></i> 返回上一页
            </div> -->
            </el-row>
          </el-form>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import createSalaryStep from '@/components/publicCom/createSalaryStepJz'
import salaryTopTitle from '@/components/publicCom/salaryTopTitle'

export default {
  name: 'createSalary',
  components: {
    createSalaryStep,
    salaryTopTitle,
  },
  data() {
    return {
      salaryOperate: 'salaryOperate', //非建工资下载
      salaryExcel: 'salaryExcel', //非建工资模板
      createWay: '在线生成工资表',
      activeIndex: 0,
      comapnyName: '公司名称',
      formData: {},
      orglist: [],
      // orgId:""
      formRules: {
        orgId: [
          {
            required: true,
            // pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            message: '请选择生成工资表的员工范围',
            trigger: 'blur',
          },
        ],
        month: [
          {
            required: true,
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            message: '请选择生成工资表的发薪月份',
            trigger: 'change',
          },
        ],
      },
      isAdd: false,
      nickName: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
    }
  },
  created() {
    this.getOrglist()
    this.nickName = this.$store.state.nickName
  },
  methods: {
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/orglist',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toCreateSalary() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.createSalary()
        } else {
        }
      })
    },
    createSalary() {
      var orgId = this.formData.orgId[this.formData.orgId.length - 1]

      var data = {
        year: this.formData.month.split('-')[0], //年
        month: this.formData.month.split('-')[1], //月
        orgId: orgId, //组织机构id
      }
      this.isAdd = true
      this.axios({
        method: 'post',
        url: 'api-su/salary/expand/create',
        data: data,
      })
        .then(
          (response) => {
            this.isAdd = false
            if (!response.data.hasError) {
              this.$message({
                message: '生成成功',
                type: 'success',
              })
              this.createSuccess(response.data.result)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'warning',
              })
            }
          },
          (response) => {
            this.isAdd = false
            this.$message({
              message: '数据请求失败',
              type: 'warning',
            })
          }
        )
        .catch((error) => {})
    },
    createSuccess(data) {
      // this.$router.push("/home/salary/editSalary"+ data.id);
      this.$router.push({
        path: '/home/salary/editSalary',
        name: 'editSalary',
        query: {
          salaryId: data.id,
          type: 'create',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      this.$router.push('/home/salary/createSalaryWay')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/salary/qySalaryList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  height: calc(100% - 67px);
}

.el-form-item {
  margin-bottom: 28px;
}

.createPayWin {
  margin-top: 60px;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 70px;
  p {
    font-size: 28px;
    color: #333;
    font-family: '宋体';
    margin-bottom: 60px;
  }
  .el-form {
    display: inline-block;
    width: 460px;
    /deep/ .el-form-item__content {
      width: 340px;
    }
    /deep/ .el-input {
      width: 340px;
    }
    .row-padding-bottom {
      // margin-bottom: 10px;
    }
    .commonBut {
      margin-top: 8px;
    }
    .goBack {
      margin-top: 22px;
      font-size: 14px;
      color: #999;
      cursor: pointer;
      i {
        vertical-align: middle;
      }
    }
    .createWay /deep/ input {
      font-size: 14px;
      color: #666;
      background: #bfc5cc;
      border: 1px solid #bfc5cc;
    }
    .companyName /deep/ input {
      border: none;
      color: #666;
    }
  }
  /deep/ .toolbar {
    padding: 0;
  }
}
</style>
